<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./vuex.min.js"></script>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
window.onload=function(){
    //引入辅助函数
    var mapState=Vuex.mapState;
    var mapGetters=Vuex.mapGetters;
    var mapMutations=Vuex.mapMutations;
    var mapActions=Vuex.mapActions;




    //1.实例化
    var store=new Vuex.Store({
        state:{
            //数据维护/数据初始化-data
            list:[],
            students:[1,2,3,4],
            teachers:[]
        },
        getters:{
            //获取器-计算属性
            list:state=>state.list,
            students:state=>state.students

        },
        mutations:{
            //突变，methods-》同步函数-》修改state
            addMemo(state,memo){
                //追加到list中
                state.list.push(memo);
            },
            delMemoHandler(state,id){
                state.list=state.list.filter((item)=>{
                    return item.id!=id
                });

            }//end
        },
        actions:{
            //动作，methods-》异步函数
            getData(context,memo){
                $.ajax({
                    url:'http://47.106.244.1:8099/manager/category/findAllCategory',
                    success:function(data){
                       // console.log(data.data);
                        //触发突变-》修改state
                        context.commit("addMemo",memo);
                    }
                });
            }
        }
    });

    
    //2.注入到vue根实例中
    new Vue({
        el:"#app",
        store,//注入store
        data:{
            msg:'',
            index:1
        },
        computed:{
          // ...mapState(['list',"students"])
          ...mapGetters(['list','students'])
        },
        methods:{
            ...mapMutations(['delMemoHandler']),
            ...mapActions(["getData"]),
            addMemo(){
                //声明数据格式
                var memo={
                    id:this.index,
                    msg:this.msg,
                    time:new Date().toLocaleString()
                }
                //追加到list中
               // this.list.push(memo);
                //1.触发突变，传递memo参数-同步函数
               // this.$store.commit("addMemo",memo);

               //2.触发动作，传递memo-异步函数
               //this.$store.dispatch("getData",memo);
                this.getData(memo);

                this.index++;
                this.msg='';

            },
            delMemo(id){
               //触发突变，传递id
               //this.$store.commit("delMemo",id);
               this.delMemoHandler(id);

            }//end
        }
    });
}
    </script>
</head>
<body>
    <div id="app">
        <h2>备忘录</h2>
        <form action="#" @submit.prevent='addMemo'>
            <input type="text" v-model='msg'>
            <input type="submit" value="保存">
        </form>
        {{students}}
        <ul>
            <li v-for='item in list'>
                <span>{{item.id}}、</span>
                <span>{{item.msg}}、</span>
                <span>{{item.time}}</span>
                <a href="#" @click.prevent='delMemo(item.id)'>删除</a>
            </li>
        </ul>
    </div>
</body>
</html>